<script setup lang="ts">
import dayjs from 'dayjs';
import { ref } from 'vue';
import 'dayjs/locale/zh-cn';


defineProps<{
}>()

</script>

<template>
  		<div class="phone-table">
			<div class="head">
				<div class="back"></div>
				<div class="front">
					<div></div>
					<div></div>
				</div>
			</div>
			<div class="support"></div>
			<div class="base"></div>
		</div>
</template>

<style scoped>
	.phone-table{
		width: 20em;
		height: 20em;
		perspective: 100em;
	}
	.phone-table .head{
		width: 10em;;
		height: 10em;
		display: flex;
		flex-direction: column;

		transform: rotateY(40deg) rotateZ(-10deg) rotateX(30deg);
		z-index: 3;
		position: relative;
	}
	.phone-table .head .back{
		width: 8em;
		height: 8em;
		border-radius: 0.8em;
		background-color: #333;
		float: left;
	}
	.phone-table .head .front{
		width: 8em;
		height: 3em;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		margin-top: -1.8em;
		z-index: 100;
	}
	.phone-table .head .front div{
		width: 2em;
		height: 0.6em;
		background-color: #220808;
		border-radius: 0.5em;
	}
	.phone-table .support{
		width: 1.5em;
		height: 4em;
		margin-top:-3em;
		margin-left: 3em;
		background-color: #555;
		z-index: 2;
		position: relative;
		box-shadow: 0 0.3em 0.5em #000;
	}
	.phone-table .base{
		width: 6em;
		height: 6em;
		background-color: rgb(106, 100, 100);
		border-radius: 50%;
		margin-left: 1em;
		margin-top: -3em;
		transform: rotateX(70deg);
		z-index: 1;
		position: relative;
		box-shadow: -0.3em 1em 0.5em #000;
	}
</style>